<template>
	<div class="progress-container" :style="{ width: circumference + 'px', height: circumference + 'px' }">
		<div class="progress-circle" :style="{ background: circleBackground }" />
		<div class="progress-value" v-if="!completed">{{ progress }}</div>
		<div class="check-icon" v-if="completed">✔</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";

defineProps({
	circumference: {
		type: Number,
		default: 20,
	},
});

const progress = ref(0);
const completed = ref(false);
const circleBackground = ref("conic-gradient(#4caf50 0%, #4caf50 0%, #e0e0e0 0% 100%)");

const updateProgress = (target, duration) => {
	const interval = duration / (target - progress.value);
	const intervalId = setInterval(() => {
		progress.value += 1;
		const percentage = progress.value / 100;
		circleBackground.value = `conic-gradient(#4caf50 ${percentage * 360}deg, #e0e0e0 0deg)`;

		if (progress.value >= target) {
			clearInterval(intervalId);
			if (target === 99) {
				setTimeout(() => updateProgress(100, 1000), 1000);
			} else if (target === 100) {
				completed.value = true;
			}
		}
	}, interval);
};

onMounted(() => {
	updateProgress(99, 1500);
});
</script>

<style scoped>
.progress-container {
	position: relative;
}
.progress-circle {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #e0e0e0;
	clip-path: circle(50% at 50% 50%);
}
.progress-circle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 80%;
	background-color: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.progress-value {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: v-bind(circumference * 0.5 + "px");
	font-weight: bold;
}
.check-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: v-bind(circumference * 0.5+ "px");
	font-weight: bolder;
	color: #4caf50;
}
</style>
